<template>
  <div class="status-selector">
    <div class="status-input" @click="showDropdown = true">
      <span v-if="selected" class="status-selected-text">{{ selected }}</span>
      <span v-else class="status-placeholder">请选择状态</span>
      <span class="status-arrow">▼</span>
    </div>
    <div v-if="showDropdown" class="status-dropdown" @click.stop>
      <ul>
        <li @click="selectStatus('')" :class="{selected: !selected}">全部状态</li>
        <li v-for="option in options" :key="option" @click="selectStatus(option)" :class="{selected: selected === option}">{{ option }}</li>
      </ul>
    </div>
    <div v-if="showDropdown" class="status-mask" @click="showDropdown = false"></div>
  </div>
</template>

<script>
export default {
  name: 'StatusSelector',
  props: {
    options: { type: Array, required: true },
    modelValue: { type: String, default: '' }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      showDropdown: false,
      selected: this.modelValue
    }
  },
  watch: {
    modelValue(val) { this.selected = val }
  },
  methods: {
    selectStatus(option) {
      this.selected = option
      this.$emit('update:modelValue', option)
      this.showDropdown = false
    }
  }
}
</script>

<style scoped>
.status-selector { position: relative; display: inline-block; width: 100%; }
.status-input {
  border: 1px solid #00f5ff44;
  background: rgba(26, 35, 61, 0.7);
  border-radius: 6px;
  padding: 8px 32px 8px 12px;
  min-height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}
.status-selected-text { color: #00ffe7; font-weight: 500; }
.status-placeholder { color: #93c5fd; opacity: 0.7; }
.status-arrow { position: absolute; right: 12px; color: #00f5ff; font-size: 14px; }
.status-dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: rgba(26, 35, 61, 0.98);
  border: 1px solid #00f5ff44;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 245, 255, 0.18);
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 0;
  margin-top: 6px;
}
.status-dropdown ul { list-style: none; margin: 0; padding: 0; }
.status-dropdown li {
  padding: 6px 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.status-dropdown li.selected, .status-dropdown li:hover {
  background: #00f5ff22;
  color: #00ffe7;
}
.status-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; }
.theme-light .status-input { background: #fff !important; border: 1px solid #e0e7ef !important; color: #222 !important; }
.theme-light .status-arrow { color: #0073e6 !important; }
.theme-light .status-selected-text { color: #0073e6 !important; }
.theme-light .status-placeholder { color: #888 !important; }
.theme-light .status-dropdown { background: #fff !important; border: 1px solid #e0e7ef !important; box-shadow: 0 8px 32px rgba(0,115,230,0.10) !important; color: #222 !important; }
.theme-light .status-dropdown li { color: #222 !important; }
.theme-light .status-dropdown li.selected, .theme-light .status-dropdown li:hover { background: #e6f7ff !important; color: #0073e6 !important; }
</style>
